<template>

    <!-- 查询条件 -->
    <div style="border: 1px solid black; margin: 10px; padding: 10px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="名称">
                <el-input v-model="formInline.WsName" clearable />
            </el-form-item>

            <el-form-item label="编码">
                <el-input v-model="formInline.WsCode" clearable />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="WorkShopShow">查询</el-button>
                <el-button type="warning" @click="reset">重置</el-button>
                <el-button type="success" @click="WorkAdd">添加</el-button>
            </el-form-item>
        </el-form>
    </div>


    <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50" />

        <el-table-column prop="wsCode" label="编码" width="120" />
        <el-table-column prop="wsName" label="名称" width="120" />
        <el-table-column prop="wsMsg" label="描述" width="120" />
        <el-table-column prop="addProp" label="创建人" width="120" />
        <el-table-column prop="addTime" label="创建时间" width="200">
            <template #default="script">
                {{ moment(script.row.addTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
        </el-table-column>
        <el-table-column prop="updTime" label="更新时间" width="200">
            <template #default="scope">
                {{ scope.row.updTime == null ? "" : moment(scope.row.updTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="script">
                <el-button link type="primary" size="small" @click="DelWork(script.row.id)">
                    删除
                </el-button>
                <el-button link type="primary" size="small" @click="UpdWork(script.row)">修改</el-button>
            </template>
        </el-table-column>


    </el-table>

    <!-- 修改弹框 -->
    <el-dialog v-model="workshowupdTable" title="修改车间" width="500">
        <el-form :model="updData">

            <el-form-item label="车间名称" :label-width="formLabelWidth">
                <el-input v-model="updData.wsName" autocomplete="off" />
            </el-form-item>

            <el-form-item label="车间备注" :label-width="formLabelWidth">
                <el-input v-model="updData.wsMsg" autocomplete="off" :rows="3" type="textarea" />
            </el-form-item>


        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="workshowupdTable = false">取消</el-button>
                <el-button type="primary" @click="workshopData">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 添加 -->
    <el-dialog v-model="WorkAddVis" title="添加车间" width="500">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">

            <el-form-item label="名称" prop="wsName">
                <el-input v-model="ruleForm.wsName" />
            </el-form-item>

            <el-form-item label="描述" prop="wsMsg">
                <el-input v-model="ruleForm.wsMsg" :rows="2" type="textarea" />
            </el-form-item>



            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    添加
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination v-model:current-page="Page.PageIndex" v-model:page-size="Page.PageSize" :page-sizes="[3, 5, 7, 9]"
        layout="total, sizes, prev, pager, next, jumper" :total="Page.TotalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页" />

</template>

<script lang="ts" setup>

import Maxios from '@/Http/MesHelp'
import { ref, reactive, onMounted } from 'vue'
import moment from 'moment'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
//

const formLabelWidth = '120px'

// 分页 查询 条件
const Page = reactive({
    PageIndex: 1,
    PageSize: 10,
    TotalCount: 0,
    TotalPage: 0
})
const formInline = reactive({
    WsCode: '',
    WsName: ''
})

const tableData = ref([])

const reset = () => {
    formInline.WsCode = "";
    formInline.WsName = "";
    WorkShopShow()
}
// 显示 分页 方法
const WorkShopShow = () => {
    Maxios.get("/api/factory/WorkshopManageShow", {
        params:
        {
            PageIndex: Page.PageIndex, PageSize: Page.PageSize,
            WsCode: formInline.WsCode, WsName: formInline.WsName
        }
    }).then(res => {
        console.log(res)
        tableData.value = res.data.data.list
        Page.TotalCount = res.data.data.count
        Page.TotalPage = res.data.data.page
    })
}

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    Page.PageSize = val
    WorkShopShow()
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    Page.PageIndex = val
    WorkShopShow()
}

// 删除方法
const DelWork = (id: any) => {
    ElMessageBox.confirm(
        '你确定要删除吗?',
        '删除警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // ElMessage({
            //     type: 'success',
            //     message: 'Delete completed',
            // })

            Maxios.post("/api/factory/WorkshopManageDel", { id: id }).then(res => {
                if (res.data.code == 200) {
                    ElMessage.success("删除成功");
                    WorkShopShow()
                }
                else {
                    ElMessage.success("删除失败");
                    WorkShopShow()
                }
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '您取消了删除',
            })
        })
}

const updData = reactive({
    id: '',
    wsCode: '',
    wsName: '',
    wsMsg: '',
})

//修改弹框
const workshowupdTable = ref(false)
const UpdWork = (row: any) => {
    //alert("asdsdsaa"); 
    updData.id = row.id
    updData.wsCode = row.wsCode
    updData.wsName = row.wsName
    updData.wsMsg = row.wsMsg
    console.log("asds", updData);
    workshowupdTable.value = true
}

const workshopData = () => {
    Maxios.post("/api/factory/WorkshopManageUpd", updData).then(res => {
        if (res.data.code == 200) {
            ElMessage.success("修改成功");
            WorkShopShow()
            workshowupdTable.value = false
        }
        else {
            ElMessage.success("修改失败");
            WorkShopShow()
            workshowupdTable.value = false
        }
    })
}

//添加
const WorkAddVis = ref(false)
const WorkAdd = () => {
    WorkAddVis.value = true
}
interface RuleForm {
    wsCode: string
    wsName: string
    wsMsg: string
    addProp: string
}
const User = reactive({
    Name: localStorage.getItem("userNickname") || ''
})
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    wsCode: '',
    wsName: '',
    wsMsg: '',
    addProp: User.Name
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
    wsName: [
        { required: true, message: '名称不能为空', trigger: 'blur' },
    ],
    wsMsg: [
        { required: true, message: '描述不能为空', trigger: 'blur' },
    ],

})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')

            Maxios.post("/api/factory/WorkshopManageAdd", ruleForm).then(res => {
                if (res.data.code == 200) {
                    ElMessage.success("添加成功")
                    WorkAddVis.value = false
                    WorkShopShow()
                }
                else {
                    ElMessage.error("添加失败")
                    WorkAddVis.value = false
                    WorkShopShow()
                }
            })

        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))

onMounted(() => {
    WorkShopShow()
})

</script>
